<template>
    <div>
        <van-nav-bar title="修改物品信息" left-text="返回" left-arrow @click-left="back" />
        <van-form class="text" id="form" @submit="onSubmit">
            <van-field class="field" v-model="name" name="物品名称" label="物品名称" placeholder="物品名"
                :rules="[{ required: true, message: '请填写物品名称' }]" />
            <van-field class="field" is-link label="生产日期" @click="showTimePicker = true" :value="currentDateView" />
            <van-popup class="field" :style="{ height: '70%' }" position="bottom" v-model="showTimePicker">
                <van-datetime-picker @cancel="showTimePicker = false" @confirm="onTimeConfirm" v-model="currentDate"
                    type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" />
            </van-popup>
            <van-field class="field" v-model="date2" type="number" name="保质期" label="保质期" placeholder="单位：天"
                :rules="[{ required: true, message: '请填写保质期' }]" />
            <van-field class="field" readonly clickable name="picker" :value="value" label="标签" placeholder="点击选择标签"
                @click="showPicker = true" />
            <van-popup class="field" :style="{ height: '70%' }" v-model="showPicker" position="bottom">
                <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>
            <van-field class="uploader" name="uploader" label="上传图片">
                <template #input>
                    <van-uploader v-model="uploader" :after-read="afterRead" />
                </template>

            </van-field>
            <div style="margin: 16px;" @click="submit">
                <van-button id="submit" round block type="info" native-type="submit">提交</van-button>
            </div>
            <van-notice-bar color="#1989fa" background="#ecf9ff"
                :text="text[Math.floor(Math.random() * text.length)]" />
        </van-form>
    </div>
</template>

<script setup>
import { Toast } from 'vant';
import { AV } from "@/App";
const { Query, User } = AV;

const FoodPeriod = AV.Object.extend("FoodPeriod");

// 构建对象
const foodPeriod = new FoodPeriod();

export default {
    data() {
        return {
            name: "",
            show: false,
            currentDateView: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`,
            date2: "",
            value: "",
            columns: ["水果", "药物", "零食", "贵重物品"],
            uploader: [],
            image: {},
            showPicker: false,
            showTimePicker: false,
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(2021, 0, 17),
            text: [
                "坚持最孤独，可是你要坚持，最终被看到的，都是坚持下来的人。",
                "没人挡风遮雨，自己就撑起一片天。别总自顾可怜，因为谁活着都挺难。",
                "想哭就哭吧，别撑着，你又不是雨伞。",
                "你做得再好，也还是有人指指点点；你即便一塌糊涂，也还是有人唱赞歌；所以不必掉进他人的眼神里，你需要讨好的，仅仅是你自己。",
                "未来的事说不准，凡事都有可能，不要让以后的不确定，成为你今天堕落的理由，所以，加油！",
                "背负太多期待的目光，怎么可能轻易辜负？即使星星碎了，溢出的光也很美呀。",
                "任何时候都不要忘记努力，因为付出甘之如饴，所得才会皆大欢喜。",
                "放弃很容易，但是放弃之后总会有很多不容易，坚持很难，但是坚持下去会越来越美丽。",
                "你再优秀，也总有人对你不堪。你再不堪，也有人认为是限量版的唯一。生命的价值在于当你觉得，你走到尽头时，其实你往往是在另一段旅程的起点。",
                "每次跌倒后重新站起来，都会让人越来越坚强。",
                "你的才能并不能决定你人生高度，决定你的是你的态度。",
                "不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福。",
                "世界上没有两片相同的树叶，你再不堪，再平凡，也是独一无二，无须自轻自贱。",
                "生活最大的捷径，就是在认清没有捷径之后的全力以赴。",
                "把不忙的工作做的出色，把不咸不淡的生活过得精彩。",
                "不管什么天气记得随时带上自己的阳光，不管什么遭遇，记得内心装满开心的童话。",
                "愿你一生努力，一生被爱，想要的都拥有，得不到的都释怀。",
                "世上没有白费的努力，也没有碰巧的成功。所有的心意无心插柳，最后都是水到渠成。",
                "记得向前看，别烂在过去和梦里。",
                "山高自有可行路，水深自有渡船人。 ",
                "洁身自好绝对理智，永远温柔永远清醒。",
                "不要错失白天的太阳，又缺席夜晚的星星。 ",
                "少年不惧岁月长，彼方尚有荣光在。",
                "生活本来就是一场浪漫革命。",
                "新鲜感褪去真正的爱才开始浮现。",
                "当前网络不可用，请检查你的网络设置。 ",
                "热爱漫无边际，生活自有分寸。 ",
                "遇见是故事的开端，错过是宿命的缺憾。",
                "就算不能恰似寒光遇骄阳，也要许你光芒万丈好。",
                "花会一年一度的开，可是人不会一年一年都在 ",
                "没有人可以回到过去，但谁都可以从现在开始。",
                "舌头没有骨头，但强大到可以刺破心脏。",
                "能力不高可以理解，人品不好无法将就。",
                "今日种种，似水无痕；明夕何夕，君已陌路。",
                "尽量不想你，尽量开心，尽量早睡，尽量。",
                "好听的话别当真，难听的话别走心。",
                "给足了甜头之后突然变得冷漠最伤人。",
                "坏情绪总要过去，人总要活下去。",
                "我们总是梦想着天边的一座奇妙的玫瑰园，而不去欣赏今天就开在我们窗口的玫瑰。",
                "当你休息的时候，别人还在奔跑!",
                "不是别人不理解你，是你还没有优秀到让别人理解。你要做的就是：保持优秀。",
                "眼泪不是答案，拼搏才是选择。只有回不了的过去，没有到不了的明天。",
                "用求知支撑奋斗，做一个贵耳重目、广学深思的人。",
                "成功不是只有将来才有，而是从决定做的那一刻起，持续积累而成!",
                "成功的信念在人脑中的作用就如闹钟，会在你需要时将你唤醒。",
                "前面是绝路，希望在转角，梦在心中，路在脚下。",
                "走在奋斗的路上，不要过分在意一些荣辱，平常心便好。",
                "肯低头的人，永远不会撞到矮门。",
                "别紧张，深呼吸，坚持住，扛过去。",
                "毕业了，对于一些人，学生时代也永别了。"
            ],
        };
    },
    methods: {
        onSubmit(values) {
            console.log("submit", values);
        },
        onConfirm(value) {
            this.value = value;
            this.showPicker = false;
        },
        // 此时可以自行将文件上传至服务器
        afterRead(file) {
            const data = {
                base64: file.content,
            };
            const image = new AV.File(file.file.name, data);
            image
                .save({
                    onprogress: (process) => {
                        console.log(process);
                    },
                })
                .then(
                    (file) => {
                        console.log(image);
                    },
                    (error) => {
                        window.alert("保存图片失败!");
                        throw error;
                    }
                );
            console.log(file);
            this.image = image;
        },
        back() {
            this.$router.back();
        },
        submit() {
            //console.log(this.currentDateView);
            const todo = AV.Object.createWithoutData(
                "FoodPeriod",
                this.$route.query.id
            );
            todo.set("Item", this.name);
            todo.set("Start", this.currentDateView);
            todo.set("ShelfLife", this.date2);
            todo.set("Type", this.value);
            todo.set("img", this.image);
            todo.save().then(
                (todo) => {
                    console.log("fetch ok");
                    Toast.success('提交成功');
                    this.$router.back();

                },
                (error) => {
                    console.log("fetch failed");
                }
            );
        },
        showPopup() {
            this.show = true;
        },
        onTimeConfirm(currentDate) {
            this.currentDateView = `${currentDate.getFullYear()}-${currentDate.getMonth() + 1}-${currentDate.getDate()}`
            this.showTimePicker = false;
        },
    },
};
</script>

<style>
.field,
.uploader {
    width: 90%;
    left: 5%;
    height: 6rem;
}

#submit {
    width: 90%;
    left: 5%;
}
/* ? */
.text {
    text-decoration: solid;
    /* font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; */
    font-size: larger;
    font-style: normal;
    font-weight: 500;
    color: #000;
}
</style>
